<template>
	<view class="novel-content">
		<view class="function" :class="{turnOffLights: flag == 1}">
			<button type="default" size="mini" @click="turnOffLights" v-if="!flag">关灯</button>
			<button type="default" size="mini" v-else @click="turnOnLights">开灯</button>
			<button type="default" size="mini" @click="wordBig">字大</button>
			<button type="default" size="mini" @click="wordNormal">正常</button>
			<button type="default" size="mini" @click="wordSmall">字小</button>
		</view>
		<view class="content" :class="{turnOffLights: flag == 1}">
			<view v-for="(item, index) in contentList" :key="index"
				:class="{wordBig: wordFlag == 1,wordSmall: wordFlag == 0}">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
					catatitle: '',
					novelname: '',
					classify: ''
				},
				content: '',
				contentList: [],
				flag: 0,
				wordFlag: -1
			};
		},

		onLoad(options) {
			this.queryObj.catatitle = options.novelName
			this.queryObj.novelname = options.name
			this.queryObj.classify = options.classify

			this.getNovelContent()
		},

		methods: {
			async getNovelContent() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/article/novel/catalog',
					data: this.queryObj
				})
				this.content = res.data
				this.contentList = (this.content.split('\r\r\n'))
			},

			turnOffLights() {
				this.flag = 1
			},

			turnOnLights() {
				this.flag = 0
			},

			wordBig() {
				this.wordFlag = 1
			},

			wordSmall() {
				this.wordFlag = 0
			},

			wordNormal() {
				this.wordFlag = -1
			}
		}
	}
</script>

<style lang="scss">
	.turnOffLights {
		background-color: #373737 !important;
		color: #fff !important;

		button {
			background-color: rgba(0, 0, 0, .3);
			color: #fff;

		}
	}

	.wordBig {
		font-size: 40rpx !important;
	}

	.wordSmall {
		font-size: 24rpx !important;
	}

	.function {
		position: fixed;
		background-color: transparency;
		border-radius: 40rpx;

		button {
			border-radius: 40rpx;
			background-color: rgba(0, 0, 0, .3);
			color: #fff
		}

		button:nth-of-type(2) {
			margin: 0 10rpx;
		}

		button:nth-of-type(3) {
			margin-right: 10rpx;
		}
	}

	.content {
		// white-space: pre-line; // 这个呢能将\r\r\n识别出来并保留下来，也i就达到了换行的功能 但是我不好做样式 所以用来别的方法
		color: #333333;
		background-color: #faeed7;
		// margin-top: 20px;
		padding-top: 60rpx;

		view {
			padding: 20rpx 20rpx;
			font-size: 32rpx;
		}
	}
</style>
